<script setup>
import { onMounted, ref, watch } from 'vue'

// 参数
const props = defineProps({
  // 当前歌曲信息
  playerInfo: {
    type: Object,
    default: () => ({}),
  },
  // 播放器状态
  playerStatus: {
    type: Object,
    default: () => ({}),
  },
  // 播放队列数据
  playerQueue: {
    type: Array,
    default: () => [],
  },
  // 是否显示加载
  loading: {
    type: Boolean,
    default: false,
  },
})

// 自定义事件
const emit = defineEmits([
  'init',
  'switch',
  'pause',
  'play',
  'prev',
  'next',
  'cutSong',
  'seek',
  'playbackRate',
  'playerMode',
  'queueSong',
  'delQueue',
  'clearQueue',
  'likeSong',
])

// 显示小播放器
const showSmallPlayer = ref(false)
// 显示大播放器
const showBigPlayer = ref(false)
// 显示播放队列
const showQueue = ref(false)

watch(
  () => props.playerStatus,
  (newPlayerStatus) => {
    showSmallPlayer.value = newPlayerStatus.smallPlayer
    showBigPlayer.value = newPlayerStatus.bigPlayer
  },
  { deep: true }
)

/**
 * 暂停/播放
 */
const changePlayerPaused = () => {
  if (!props.playerStatus.paused) emit('pause')
  else emit('play')
}

/**
 * 切换播放倍速
 * @param type
 */
const changePlaybackRate = (type) => {
  emit('playbackRate', type)
}

/**
 * 切换播放模式
 * @param type
 */
const changePlayMode = (type) => {
  emit('playerMode', type)
}

/**
 * 上一首
 */
const changePlayerPrev = () => {
  emit('prev')
}

/**
 * 下一首
 */
const changePlayerNext = () => {
  emit('next')
}

/**
 * 跳转歌曲时间
 * @param time
 */
const changePlayerSeek = (time) => {
  emit('seek', time)
}

/**
 * 切歌
 * @param song
 */
const changeCutSong = (song) => {
  emit('cutSong', song)
}

/**
 * 喜欢
 * @param Like
 */
const changePlayerLike = (item) => {
  console.log(item.name, 'h---p')
  emit('likeSong', item)
}

/**
 * 显示/关闭播放队列弹窗
 * @param show
 */
const switchPlayerQueue = (show) => {
  showQueue.value = show
}

/**
 * 点击队列歌曲
 * @param item
 */
const changeQueueSong = (item) => {
  emit('queueSong', item)
}

/**
 * 删除对应队列歌曲
 * @param index
 */
const changeDelSong = (id, type) => {
  emit('delQueue', id, type)
}

/**
 * 清空队列
 */
const changeClearQueue = (type) => {
  emit('clearQueue', type)
}

/**
 * 关闭、显示大播放器
 * @param status
 */
const switchPlayer = (status) => {
  emit('switch', status)
}

onMounted(() => {
  // 设置播放器初始状态
  emit('init')
})
</script>

<template>
  <!-- 小播放器界面 -->
  <ty-small-player
    :show="showSmallPlayer"
    :player-info="playerInfo"
    :player-status="playerStatus"
    :player-queue="playerQueue"
    :loading="loading"
    @play="changePlayerPaused"
    @pause="changePlayerPaused"
    @cut-song="changeCutSong"
    @show:big-player="switchPlayer(true)"
    @show:queue="switchPlayerQueue(true)"
  ></ty-small-player>
  <!-- 大播放器界面 -->
  <ty-big-player
    :show="showBigPlayer"
    :player-status="playerStatus"
    :player-info="playerInfo"
    :loading="loading"
    @seek:time="changePlayerSeek"
    @like="changePlayerLike"
    @prev="changePlayerPrev"
    @next="changePlayerNext"
    @play-mode="changePlayMode"
    @playback-rate="changePlaybackRate"
    @play="changePlayerPaused"
    @pause="changePlayerPaused"
    @show:queue="switchPlayerQueue(true)"
    @close="switchPlayer(false)"
  ></ty-big-player>
  <!-- 播放队列界面 -->
  <ty-popup-list
    :show="showQueue"
    :list="playerQueue"
    :player-info="playerInfo"
    @clear="changeClearQueue"
    @del="changeDelSong"
    @click="changeQueueSong"
    @close="switchPlayerQueue(false)"
  ></ty-popup-list>
</template>
